<template>
  <div class="search-option">
    <label v-if="label">{{ label }}</label>
    <el-select
      v-model="query"
      filterable
      :placeholder="$t('placeholder.city')"
      @change="change"
      :clearable="!clearable"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  modelValue: {
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  clearable: {
    default: true,
  },
});
const emit = defineEmits(["change", "update:modelValue"]);
const query = ref(props.modelValue);
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const change = (val) => {
  // emit("update:modelValue", query);
  emit("change", query);
};
</script>
<style scoped lang="scss"></style>
